[프론트엔드] 웹 성능 지표
웹 성능 지표
이 문서는 웹 페이지 성능을 평가하는 지표와 이를 개선하는 방법을 안내해요.
목표는 사용자 경험을 최적화하는 방법까지 간단하게 학습하는 것입니다.
성능 지표는 LCP, FCP, CLS, TTFB 등 다양하게 있어요. 그리고 구글과 web.dev에서는 성능을 나타내는 지표들 중에 핵심 지표를 선정해요. 과거에는 LCP, FID, CLS가 google 문서에서 핵심 web vitals 지표라고 소개 했어요. 하지만 이 성능 지표는 계속 업데이트 되고 있습니다.
1.1 Core Web Vitals (핵심 지표)
2026년 1월 기준 Core Web Vitals와 평가 기준이에요.
LCP (Largest Contentful Paint)
페이지에서 가장 큰 콘텐츠(이미지, 비디오, 텍스트 블록 등)가 렌더링 시작하는 시간
권장 기준: 페이지 로딩이 시작된 후 2.5초 2초 이내에 LCP가 발생. (26년도 부터 2초 이하 동문)
로딩 경험 지표
CLS (Cumulative Layout Shift)
페이지 로딩 중 레이아웃 이동 정도
권장 기준: 0.1 0.08 미만
시각적 안정성 지표
FCP (First Contentful Paint)
DOM에 첫 콘텐츠가 렌더링되는 시간 → 초기 로딩 체감 속도
권장 기준: 1.5초 (새로 편입)
INP (Interaction to Next Paint)
모든 상호작용의 지연을 종합적으로 측정하고, 화면이 실제로 다시 그려질 때까지의 시간까지 포함
권장 기준: 150ms (FID 대체)
1.2 기타 성능 지표 (공식 Core Web Vital이 아닌 지표, 사라지거나 보...
